<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html class="no-js" lang="en">
<head>
<!--- basic page needs
   ================================================== -->
<meta charset="utf-8">


<title>Category Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- mobile specific metas
   ================================================== -->
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
   ================================================== -->
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/vendor.css">
<link rel="stylesheet" href="../css/main.css">
<!-- script
   ================================================== -->
<script src="../js/modernizr.js"></script>
<script src="../js/pace.min.js"></script>
<!-- favicons
   ================================================== -->
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/x-icon">
</head>
<body id="top">
	<!-- header
   ================================================== -->
	<header class="short-header">
		<div class="gradient-block"></div>
		<div class="row header-content">
			<div class="logo">
				<a href="../index.jsp">Author</a>
			</div>
			<nav id="main-nav-wrap">
				<ul class="main-navigation sf-menu">
					<li><a href="../index.jsp" title="">Home</a></li>
					<li class="has-children current"><a href="categoty.jsp"
						title="">Categories</a>
						<ul class="sub-menus">
							<li><a href="javascript:void(0)" class="sub-menu">文学</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">艺术</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">小说</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">心理</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">经济</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">管理</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">理财</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">少儿</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">科学</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">医学</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">教辅</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">外语</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">政治</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">法律</a></li>
							<li><a href="javascript:void(0)" class="sub-menu">计算机</a></li>
						</ul></li>
					<li><a href="about.jsp">About</a></li>
					<li><a href="contact.jsp">Contact</a></li>
					<li><a href="login.jsp">Login</a></li>
				</ul>
			</nav>
			<!-- end main-nav-wrap -->
			<div class="search-wrap">
                        <form role="search" method="get" class="search-form" action="searchResults.jsp">
                            <label>
                                <span class="hide-content">Search for:</span>
                                <input type="search" class="search-field" id = "keys" placeholder="Type Your Keywords" value="" name="s" title="Search for:" autocomplete="off">
                            </label>
                            <input type="submit" class="search-submit" value="Search">
                        </form>
                        <a href="javascript:void(0)" id="close-search" class="close-btn">Close</a>
            </div>
			<!-- end search wrap -->
			<div class="triggers">
				<a class="search-trigger" href="#"><i class="fa fa-search"></i></a>
				<a class="menu-toggle" href="#"><span>Menu</span></a>
			</div>
			<!-- end triggers -->
		</div>

	</header>
	<!-- end header -->
	<!-- page header
            ================================================== -->
	<section id="page-header">
		<div class="row current-cat">
			<div class="col-full">
				<h1 id="TypeOfThePage">Category:</h1>
			</div>
		</div>
	</section>

	<!-- masonry
            ================================================== -->
	<section id="bricks" class="with-top-sep">
		<div class="row masonry">
			<!-- brick-wrapper -->
			<div class="bricks-wrapper" id = "articles">
				<div class="grid-sizer"></div>
				
			</div>
			<!-- end brick-wrapper -->
		</div>
		<!-- end row -->
		<div class="row" id="PageItems"></div>

	</section>
	<!-- bricks -->

	<!-- footer
                     ================================================== -->
	<footer>
		<div class="footer-bottom">
			<div class="row">
				<div class="col-twelve">
					<div id="go-top">
						<a class="smoothscroll" title="Back to Top" href="#top"><i
							class="icon icon-arrow-up"></i></a>
					</div>
				</div>
			</div>
		</div>
		<!-- end footer-bottom -->
	</footer>
	<div id="preloader">
		<div id="loader"></div>
	</div>
	<!-- Java Script
                                          ================================================== -->
	<script src="../js/jquery.min.js"></script>
	<script src="../js/jquery-2.1.3.min.js"></script>
	<script src="../js/plugins.js"></script>

	<script src="../js/main.js"></script>
	<script src="../js/test.js"></script>
	
	
	
	<script src="../js/jqPaginator.js"></script>
	<script type="text/javascript">
		$('#PageItems')
				.jqPaginator(
						{
							totalPages : 10,
							visiblePages : 0,
							currentPage : 1,
							first : '<li class="first" style="float:left;width:10%;display:block;background:#dbdbdb;text-align:center;padding: 6px 12px;margin-left: 24%;margin-right:2%;"><a href="javascript:void(0);" >First</a></li>',
							prev : '<li class="prev" style="float:left;width:10%;display:block;background:#dbdbdb;text-align:center;padding: 6px 12px;margin-left: 2%;margin-right:2%;"><a href="javascript:void(0);">Pre</a></li>',
							next : '<li class="next" style="float:left;width:10%;display:block;background:#dbdbdb;text-align:center;padding: 6px 12px;margin-left: 2%;margin-right:2%;"><a href="javascript:void(0);">Next</a></li>',
							last : '<li class="last" style="float:left;width:10%;display:block;background:#dbdbdb;text-align:center;padding: 6px 12px;margin-left: 2%;margin-right:20%;"><a href="javascript:void(0);">Last</a></li>',
							page : '<li class="page" style="float:left;width:5%;display:block;background:#dbdbdb;text-align:center;"><a href="javascript:void(0);">{{page}}</a></li>',
							onPageChange : function(num) {
								var typeName = getVarValue("type");
								// 封装成json对象
								var jo1 = {
									"type" : typeName
								};

								$
										.ajax({
											type : "post",
											url : "../getBookNumOfType.action",
											dataType : "json",
											data : jo1,
											success : function(data) {
												changePaginator((data.num / 13), num);
												
												
											}
										});
								//实现数据加载功能

								displayPage(num, typeName);
							}
						});
	</script>
</body>
</html>